<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<div class="page-header">
	<img class="fleft titlelogo" 
		src="img/ext/glyphicons_203_lock.png">
	<h1>관리자</h1>
</div>
<article>
	<div class="row">
		<div class="span10 offset1 well">
			<canvas id="lineChart" data-type="Line" width="600px" height="400px">
			</canvas>
			<div class="legend">
				<span class="lgcolor" style="border-color:rgba(220,220,220,1)">맥주</span>
				<span class="lgcolor" style="border-color:rgba(151,187,205,0.5)">소주</span>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="span10 offset1 well">
			<canvas id="BarChart" data-type="Bar" width="600px" height="400px">
			</canvas>
			<div class="legend">
				<span class="lgcolor" style="border-color:rgba(220,220,220,0.5)">맥주</span>
				<span class="lgcolor" style="border-color:rgba(151,187,205,0.5)">소주</span>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="span10 offset1 well">
			<canvas id="PieChart" data-type="Pie" width="600px" height="400px">
			</canvas>
			<div class="legend">
				<span class="lgcolor" style="border-color:#F38630">취침</span>
				<span class="lgcolor" style="border-color:#E0E4CC">세면</span>
				<span class="lgcolor" style="border-color:#69D2E7">밥</span>
				<span class="lgcolor" style="border-color:#F38630">학원</span>
				<span class="lgcolor" style="border-color:#E0E4CC">세면</span>
				<span class="lgcolor" style="border-color:#69D2E7">밥</span>
			</div>
		</div>
	</div>
</article>
<script src="js/Chart.min.js"></script>
<script>
var data = {
		labels : ["1월","2월","3월","4월","5월","6월","7월"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [28,48,40,19,96,27,100]
			}
		]
};
var options={};
var ctx = document.getElementById("lineChart").getContext("2d");
new Chart(ctx).Line(data,options);
</script>
<script>
var data = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [28,48,40,19,96,27,100]
			}
		]
	};
var options={};
var ctx = document.getElementById("BarChart").getContext("2d");
new Chart(ctx).Bar(data,options);
</script>
<script>
var data = [
        	{
        		value: 80,
        		color: "#F38630"
        	},
        	{
        		value : 10,
        		color : "#E0E4CC"
        	},
        	{
        		value : 10,
        		color : "#69D2E7"
        	},
        	{
        		value: 80,
        		color: "#F38630"
        	},
        	{
        		value : 10,
        		color : "#E0E4CC"
        	},
        	{
        		value : 10,
        		color : "#69D2E7"
        	}
        ];
        
var options={};
var ctx = document.getElementById("PieChart").getContext("2d");
new Chart(ctx).Pie(data,options);
</script>